<template>
    <div class="home" ref="homeRef">
        <van-nav-bar title="累计分销订单" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" :placeholder="true" />
        <div class="tabs">
            <van-tabs v-model:active="active"   @click-tab="changeTabs">
                <van-tab title="全部"></van-tab>
                <van-tab title="今日"></van-tab>
                <van-tab title="本月"></van-tab>
                <van-tab title="本年"></van-tab>
                <van-tab title="自定义时间" ></van-tab>
            </van-tabs>
            <view class="dateRange" hover-class="none" hover-stop-propagation="false" v-if="dateRange">
                所选时间范围：{{ dateRange }}
            </view>
            <div class="sumTitle">
                <title-item title1st="总计" :subTitle="`￥${all_money}`"> </title-item>
            </div>
        </div>
        <div class="content">
            <div  v-for="i in list" :key="i.id">
                <div class="item">
                    <div class="left">
                        <span>{{ i.name }}</span>
                        <span class="useFunc"> +{{ i.agent_commission }}</span>
                    </div>
                    <div class="right">
                        <div class="mar-rig">订单编号：{{i.order_no }}
                        </div>
                        <span>{{ i.createtime }}</span>
                    </div>
                </div>
            </div>
            <noData :list="list" :lastPage="last_page" :page="page" />
        </div>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
            <van-picker-group title="预约日期" :tabs="['开始日期', '结束日期']" @confirm="onConfirm" @cancel="onCancel">
                <van-date-picker v-model="startDate1" :min-date="minDate" :max-date="maxDate" />
                <van-date-picker v-model="endDate1" :min-date="minDate" :max-date="maxDate" />
            </van-picker-group>
    </van-popup>
</template>
<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { orderList } from "@/services";
const router = useRouter();
import { onMounted, watch, ref } from 'vue';
import noData from "@/components/noData/noData.vue"
import useScroll from '@/hooks/useScroll'

import useMainStore from '@/stores/modules/main';
import { formatMonthDay, getDiffDays } from '@/utils/format_date';
import { computed } from '@vue/reactivity';
import { storeToRefs } from 'pinia';

const mainStore = useMainStore()
const { startDate, endDate } = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value, "YYYY,MM,DD"))
const endDateStr = computed(() => formatMonthDay(endDate.value, "YYYY,MM,DD"))
const startDate1 = ref(startDateStr.value.split(','));
const endDate1 = ref(endDateStr.value.split(','));
const dateRange = ref('')
// console.log(startDate,endDate)
const list = ref([])
const last_page = ref(1)
const page = ref(1)
const day = ref(0)
const start_time = ref('')//传给后台的参数
const end_time = ref('')//传给后台的结束时间
const all_money = ref('')
const showPicker = ref(false);
onMounted(() => {
    getList()
})
const clickTime = ()=>{
    console.log(111)
}
const changeTabs = (i) => {
    list.value = []
    last_page.value = 0
    start_time.value = ''
    end_time.value = ''
    page.value = 1
    day.value = i.name
    dateRange.value = ``//所选时间清空
    if (i.name === 4) {
        day.value = 0;
        showPicker.value = true
        return;
    }
    getList()
}
// //日期操作
// const startDate = ref(['2022', '06', '01']);
// const endDate = ref(['2023', '06', '01']);

const onConfirm = () => {
    let startTime = startDate1.value.join('-')
    let endTime = endDate1.value.join('-')
    let dif = getDiffDays(startTime, endTime)
    if (dif < 0) {
        showToast('结束时间必须大于开始时间')
        return;
    }
    dateRange.value = `${startTime} - ${endTime}`
    start_time.value = startTime
    end_time.value = endTime
    day.value = 0 //只要选择了日期就是查询的所有的数据
    page.value = 1
    showPicker.value = false
    getList()
    // showToast(`${} ${endDate1.value.join('/')}`);
};

const onCancel = () => {
    // showToast('cancel');
    dateRange.value = ``
    showPicker.value = false
};
//类型装换
const getType = (i) => {
    switch (i) {
        case '1':
            return '卡包'
            break;
        case '2':
            return '店铺洗车卡'
            break;
        case '3':
            return '实体卡'
            break;
        default:
            return '店铺洗车卡';
    }
}
//获取列表
const getList = async () => {
    let res = await orderList({ page: page.value, day: day.value, start_time: start_time.value, end_time: end_time.value })
    // list.value = [{
    //     card_type_name: '洗车类型/商品名称',
    //     merchant_name: '店铺名称',
    //     type_data: '1',
    //     price: 1,
    //     regionservice_commission: '1',
    //     id: 1
    // }]
    list.value = [...list.value, ...res.data.data]
    last_page.value = res.data.last_page
    all_money.value = res.data.all_money
    console.log(list.value, last_page.value)
}
// 监听滚动到底部
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
console.log(homeRef.value)
watch(isReachBottom, (newValue) => {
    if (newValue) {
        if (page.value == last_page.value) {
            return
        } else {
            page.value++
            getList()
        }
    }
})
const active = ref(0);
// 返回按钮
const onClickLeft = () => {
    router.back();
};
onMounted(() => {
    console.log(11111)
})
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__line {
    background: #218CC9 !important;
}

::v-deep .van-tab {
    padding: 0 !important;
    flex: auto !important;
}

::v-deep .van-tab--active {
    color: #2CB9A4 !important;
    z-index: 10000000000000000;
}

.tabs {
    position: sticky !important;
    top: 46px !important;
    z-index: 10 !important;
    background: #fff;

    .dateRange {
        padding: 20px;
        color: #646566;
    }

    .sumTitle {
        margin-left: -4px;
        margin-top: 10px;
        padding-right: 20px;
    }
}


.content {
    padding: 10px 20px 20px 20px;

    .item {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
        border-bottom: 1px solid #DADADA;

        .left {
            color: #1D1B20;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;

            .useFunc {
                color: #F66;
                font-family: PingFang SC;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }
        }

        .right {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:first-child {
                color: #979797;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
            .xyColor {
                color: rgba(44, 185, 164, 1);
            }
            &:last-child {
                color: #979797;
                font-family: PingFang SC;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }

        .mar-rig {
            margin-right: 10px;
        }
    }
}</style>